<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>提取视频信息</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/style.css" />

</head>

<body>
    <section class="p-5">
        <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
            <div class="container">
                <a href="#" class="navbar-brand">提取视频信息</a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <!--margin start = margin left-->
                        <li class="nav-item">
                            <div class="nav-link">前端知識</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">後端知識</div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="input-group mb-3">
                <span class="input-group-text">视频文件路径</span>
                <input type="text" class="form-control" id="video_path" aria-describedby="basic-addon1">
                <button class="btn btn-outline-secondary" type="button" id="video_path_buttun" onclick="sendVideoPath()">确认</button>
            </div>
        </div>
        <div class="container ">
            <figcaption class="figure-caption">视频图像在此预览</figcaption>
            <img src="static/img/video_backend.png" id="video_capture" class="figure-img img-fluid rounded">
        </div>
        <div class="container">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0"
                    aria-valuemax="100">50%</div>
            </div>
        </div>

        <div class="container mt-1">
            <input type="range" style="width: 100%;" name="range" min="0" max="100" value='0'
                        id="video_progress_control" onchange="range_change()">
        </div>



        <script type='text/javascript'>
            function change() {
                var value = document.getElementById('range').value;
                document.getElementById('value').innerHTML = value;
            }
        </script>

    </section>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery-3.5.1.min.js"></script>
    <script src="static/js/transfer.js"></script>
    <script src="static/js/websocket.js"></script>
    <script src="static/js/func.js"></script>
    <script>
        var timer = setInterval(function () {
            console.log("循环定时器");
        }, 2000);
    </script>

</body>

</html>